<template>
  <div class="saas_design_header">
    <div class="saas_template_type">
      <a-icon type="container" />
      <span>模板类型</span>
      <a-icon type="swap" />
    </div>
    <div class="saas_template_name">模板名称</div>
    <div class="saas_template_operate">
      <div class="saas_template_tips">
        <a-icon type="eye" />
        <span>预览</span>
      </div>
      <div class="saas_template_tips">
        <a-icon type="save" />
        <span>保存</span>
      </div>
      <div class="saas_template_tips">
        <a-button type="primary" @click="submitDesign"> 发布 </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { checkComponents } from "@/util/index";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["components"]),
  },
  methods: {
    submitDesign() {
      this.$router.push("/design/preview");
    },
  },
};
</script>
<style lang="scss" scoped>
.saas_design_header {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9e7ec;
  align-items: center;
  position: relative;
  color: #595961;
  box-shadow: 2px 6px 6px #eee;
  span {
    padding: 0 5px;
  }
  .saas_template_type {
    flex: 0 0 320px;
  }
  .saas_template_name {
    flex: 1;
    text-align: center;
  }
  .saas_template_operate {
    flex: 0 0 250px;
    display: flex;
    font-size: 14px;
    justify-content: space-around;
    align-items: center;
  }
}
</style>